<template>
    <div class="shopcar-box">
        <div class="shop-yi" v-for="(item,index) in shopCart" :key="item.id">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="shop-content">
                        <div class="shop-l">
                            <em>
                                <mt-switch @change="selectedChanged(item.id,$store.getters.getItemSelected[item.id])"
                                           v-model="$store.getters.getItemSelected[item.id]">
                                </mt-switch>
                            </em>
                            <img :src="item.imgUrl" alt="">
                        </div>
                        <div class="shop-r">
                            <h3 class="title" v-html="item.title">{{ item.title }}</h3>
                            <span class="gongn">
                            <span class="price">￥{{ item.now }}</span>
                            <span><numbox :itemCount="$store.getters.getItemCount[item.id]"
                                          :shopItemId="item.id" @selectedTotalPrice="getSelectedTotalPrice"></numbox></span>
                            <span class="old" @click="removeShopItem(item.id, index)">删除</span>   
                        </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shop-info">
            <p class="total">总计（不含运费）</p>
            <p class="yusuan">
                <span>已勾选商品
                    <em style="color: red; font-weight: bold; font-size: 16px">{{ selectedNum }}</em>
                    件，总价：￥<em style="color: red; font-weight: bold;font-size: 16px">{{ selectedTotalPrice }}</em>
                </span>
            </p>
            <mt-button type="danger">去结算</mt-button>
        </div>
    </div>
</template>

<script>

    import numbox from "../subcomponents/shopcartNumbox.vue";

    export default {
        name: "shopcarContainer",
        data() {
            return {
                // 购物车商品id集合
                ids: this.$store.getters.getIds,
                // 接收后台传过来已加入购物车的商品信息
                shopCart: [],
                // 购物车总价格（已勾选的商品）
                selectedTotalPrice: 0,
                // 购物车中商品已勾选的件数
                selectedNum: 0
            }
        },
        methods: {
            // 获取已勾选商品的数量
            getSelectedNum() {
              this.selectedNum = this.$store.getters.getSelectedNum;
            },
            // 获取已勾选商品的总价
            getSelectedTotalPrice() {
                this.selectedTotalPrice = this.$store.getters.getSelectedTotalPrice;
            },
            // 更改商品的勾选状态，将商品的勾选中状态保存到本地存储（true is false）
            selectedChanged(id,val) {
                var shop = {shopId: id, selected: val};
                this.$store.commit("updateSelected",shop);
                
                // console.log(id + "----" + val);

                // 每次更改勾选状态时重新从本地存储中取出最新的勾选商品总价和商品数量
                this.getSelectedTotalPrice();
                this.getSelectedNum();
            },
            // 根据从localStorage中取出的id集合从服务器中拿出所有购物车商品项
            getShopCart() {

                // 如果购物车中没有数据，就不向服务器发送请求
                if (this.ids.length <= 0) {
                    return;
                }
                this.$http.get("shopCart.main?ids=" + this.ids).then(result => {
                    if (result.status === 200) {
                        // console.log(result);
                        this.shopCart = result.body;
                    }
                })
            },
            // 删除购物车中的商品项
            removeShopItem(shopId, index) {
                 // 删除 shopCart，要删除shopCart的原因是在把购物车(localStorage)中删掉以后必须要刷新页面才能显示最新数据
                // 所以，在此我们手动删除 shopCart 中的数据
                this.shopCart.splice(index, 1);

                // 删除购物车里面的商品项
                this.$store.commit("removeShopItem", shopId);
            }
        },
        components: {
            numbox
        },
        created() {
            this.getShopCart();
            this.getSelectedTotalPrice();
            this.getSelectedNum();
        },
    }
</script>

<style lang="scss" scoped>
    .shop-yi {
        background-color: #EEEEEE;
        overflow: hidden;
    }

    .shop-content {
        display: flex;

        .shop-l {
            width: 35%;
            display: flex;
            /*justify-content: center;*/
            /*标签垂直居中盒子内部*/
            align-items: center;


            img {
                width: 50%;
                height: 100%;
                min-height: 80px;
            }
        }

        .shop-r {
            width: 65%;
            position: relative;
            font-size: 14px;

            .title {
                width: 100%;
                height: 43px;
                overflow: hidden;
                font-size: 14px;
                font-weight: bold;
            }

            span.gongn {
                position: absolute;
                bottom: 0;
                display: flex;

                span {
                    margin-right: 5px;
                }

                .old {
                    margin: 0;
                    color: #0086b3;
                }

                .price {
                    color: red;
                }
            }
        }
    }

    .shop-info {
        position: relative;
        background-color: white;
        margin: 10px;
        padding: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);

        .mint-button {
            position: absolute;

            /*采用定位+margin方式同样可以实现垂直居中*/
            top: 50%;
            right: 10px;
            bottom: 50%;
            margin: auto;
        }
    }

    .mui-numbox {
        height: 25px;
    }

    .mui-card {
        padding: 10px;
    }
</style>
<style>

</style>